<template>
  <div class="tutorial-container">
    <h1>组合式 API vs 选项式 API</h1>
    <p>本教程旨在帮助你理解 Vue 2 的选项式 API 和 Vue 3 的组合式 API 之间的核心区别。</p>

    <div class="comparison-grid">
      <!-- 选项式 API (Vue 2) -->
      <div class="api-column">
        <h2>选项式 API (Options API)</h2>
        <p>这是 Vue 2 的经典写法。代码逻辑根据 `data`, `methods`, `computed` 等选项来组织。</p>
        <pre><code class="language-javascript">
// Options API 示例
export default {
  data() {
    return {
      count: 0,
      message: '计数器'
    };
  },
  computed: {
    doubled() {
      return this.count * 2;
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  mounted() {
    console.log('组件已挂载');
  }
}
        </code></pre>
        <h4>优点：</h4>
        <ul>
          <li>易于上手，结构清晰。</li>
          <li>`this` 指向组件实例，心智负担小。</li>
        </ul>
        <h4>缺点：</h4>
        <ul>
          <li>当组件逻辑复杂时，同一个功能的代码被拆分到各处，难以维护。</li>
          <li>逻辑复用困难（依赖 Mixins，但有命名冲突、来源不清晰等问题）。</li>
        </ul>
      </div>

      <!-- 组合式 API (Vue 3) -->
      <div class="api-column">
        <h2>组合式 API (Composition API)</h2>
        <p>这是 Vue 3 的推荐写法。代码逻辑根据“功能”来组织，更利于复用和维护。</p>
        <pre><code class="language-javascript">
// Composition API 示例
import { ref, computed, onMounted } from 'vue';

export default {
  setup() {
    // 1. 响应式状态
    const count = ref(0);
    const message = '计数器';

    // 2. 计算属性
    const doubled = computed(() => count.value * 2);

    // 3. 方法
    function increment() {
      count.value++;
    }

    // 4. 生命周期钩子
    onMounted(() => {
      console.log('组件已挂载');
    });

    // 暴露给模板
    return {
      count,
      message,
      doubled,
      increment
    };
  }
}
        </code></pre>
        <h4>优点：</h4>
        <ul>
          <li>代码按功能组织，逻辑更集中，易于维护。</li>
          <li>通过“组合函数”轻松实现逻辑复用。</li>
          <li>对 TypeScript 支持更友好。</li>
        </ul>
        <h4>缺点：</h4>
        <ul>
          <li>需要理解 `ref`, `reactive` 等新概念。</li>
          <li>`setup` 函数中没有 `this`，需要适应新的心智模型。</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
.tutorial-container {
  padding: 20px;
  font-family: sans-serif;
  line-height: 1.6;
}
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 20px;
}
.api-column {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}
h1, h2 {
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}
pre {
  background-color: #2d2d2d;
  color: #f8f8f2;
  padding: 15px;
  border-radius: 5px;
  overflow-x: auto;
}
ul {
  padding-left: 20px;
}
li {
  margin-bottom: 8px;
}
</style>
